import React from 'react';
import PageTitle from 'component/page-title/index.jsx';
import CatetorySelector from './category-selector.jsx';

import Product from 'service/product-service.jsx';
import ReachEditor from 'util/rich-editor/index.jsx';
import FileUploader from 'util/file-uploader/index.jsx';
import MUtil from 'util/mm.jsx';
import './save.scss';

const _product = new Product();
const _mm = new MUtil();


class ProductSave extends React.Component {
    constructor(props) {
        console.log('ProductSave')
        super(props);
        this.state = {
            id: this.props.match.params.pid,
            name: '',//商品名称
            subtitle: '',//商品描述
            price: '',//商品价格
            stock: '',//库存
            detail: '',//详情，富文本编辑器里面的内容
            status: 1,//商品状态1，为在售状态

            categoryId: 0,
            parentCategoryId: 0,
            subImages: []
        }
    }

    componentDidMount() {
        this.loadProduct();
    }
    //加载商品详情
    loadProduct() {
        //有ID的时候，表示是编辑功能，需要表单回填  
        if (this.state.id) {
            _product.getProduct(this.state.id).then((res) => {
                let images = res.subImages.split(',');
                res.subImages = images.map((imgUri) => {
                    return {
                        uri: imgUri,
                        url: res.imageHost + imgUri
                    }
                });
                res.defaultDetail = res.detail;  
                this.setState(res);
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            })
        }
    }
    //简单字段的改变，比如商品名称，价格，库存
    onValueChange(e) {
        let name = e.target.name;
        let value = e.target.value.trim();
        this.setState({
            [name]: value
        });
    }
    //品类选择器的变化
    onCategoryChange(categoryId, parentCategoryId) {
        this.setState({
            categoryId: categoryId,
            parentCategoryId: parentCategoryId
        })
    }
    //上传图片成功
    onUploadSuccess(res) {
        let subImages = this.state.subImages;
        subImages.push(res);//数组push()后不能直接使用该数组，因为它返回的是push后的数组的长度
        this.setState({
            subImages
        })
    }
    //上传图片失败
    onUploadError(errMsg) {
        _mm.errorTips(errMsg);
    }
    //删除图片
    onImageDelete(e) {
        let index = parseInt(e.target.getAttribute('index'));
        let subImages = this.state.subImages;
        subImages.splice(index, 1);//index未取到值时，默认删除数组的第一个元素
        this.setState({
            subImages: subImages
        })
    }
    //富文本编辑器的变化
    onDetailValueChange(value) {
        console.log(value);
        this.setState({
            detail: value
        })
    }
    getSubImagesString() {
        return this.state.subImages.map(image => image.uri).join()
    }
    //提交表单
    onSubmit(e) {
        let product = {
            name: this.state.name,
            subtitle: this.state.subtitle,
            subImages: this.getSubImagesString(),
            detail: this.state.detail,
            price: parseFloat(this.state.price),
            stock: parseInt(this.state.stock),
            status: this.state.status,
            categoryId: parseInt(this.state.categoryId)
        };

        let productCheckResult = _product.checkProduct(product);
        if (this.state.id) {
            product.id = this.state.id;
        }
        //表单验证成功
        if (productCheckResult.status) {
            _product.saveProduct(product).then((res) => {
                _mm.successTips(res);
                this.props.history.push('/product/index')
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            })
        }
        //表单验证失败
        else {
            _mm.errorTips(productCheckResult.msg);
        }

    }

    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title={this.state.id ? '编辑商品' : '添加商品'}></PageTitle>

                <div className="form-horizontal">

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品名称</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control"
                                placeholder="请输入商品名称"
                                onChange={e => this.onValueChange(e)}
                                value={this.state.name}
                                name='name' />
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <input type="text" className="form-control"
                                placeholder="请输入商品描述"
                                onChange={e => this.onValueChange(e)}
                                name='subtitle'
                                value={this.state.subtitle} />
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">所属分类</label>
                        <CatetorySelector
                            categoryId={this.state.categoryId}
                            parentCategoryId={this.state.parentCategoryId}
                            onCategoryChange={
                                (categoryId, parentCategoryId) => this.onCategoryChange(categoryId, parentCategoryId)
                            } />
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品价格</label>
                        <div className="col-md-3">

                            <div className="input-group">
                                <input type="number" className="form-control"
                                    placeholder="价格"
                                    value={this.state.price}
                                    onChange={e => this.onValueChange(e)}
                                    name='price' />
                                <span className="input-group-addon">元</span>
                            </div>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                    placeholder="库存"
                                    onChange={e => this.onValueChange(e)}
                                    name='stock'
                                    value={this.state.stock} />
                                <span className="input-group-addon">件</span>
                            </div>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品图片</label>

                        <div className="col-md-10">
                            {
                                this.state.subImages.length ? this.state.subImages.map(
                                    (image, index) => (
                                        <div className='img-con' key={index}>
                                            <img src={image.url} />
                                            <i className="fa fa-close" index={index} onClick={e => this.onImageDelete(e)}></i>
                                        </div>
                                    )
                                ) : (<div>请上传图片</div>)
                            }
                        </div>

                        <div className="col-md-10 col-md-offset-2 file-upload-con">
                            <FileUploader onSuccess={(res) => { this.onUploadSuccess(res) }}
                                onError={(errMsg) => { this.onUploadError(errMsg) }}></FileUploader>
                        </div>
                    </div>

                    <div className="form-group">
                        <label className="col-md-2 control-label">商品详情</label>
                        <div className="col-md-10">
                            <ReachEditor onValueChange={(value) => this.onDetailValueChange(value)}
                                detail={this.state.detail}
                                defaultDetail={this.state.defaultDetail}></ReachEditor>
                        </div>
                    </div>

                    <div className="form-group">
                        <div className="col-md-offset-2 col-md-3">
                            <button type="submit" className="btn btn-primary btn-lg btn-block" onClick={e => this.onSubmit(e)}>提交</button>
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}

export default ProductSave;